1 00:00:00,700 --> 00:00:06,340 Okay, let's go ahead and take a look at how we can create a GUI similar to the one that we see here 2 00:00:06,340 --> 00:00:07,600 on our screen. 3 00:00:07,600 --> 00:00:12,580 This is the starting menu that was attached to all of those assets in our lecture that we're going to 4 00:00:12,580 --> 00:00:13,990 be using for our game. 5 00:00:13,990 --> 00:00:18,670 But I'm also going to show you how you can create a UI like this for your game from scratch. 6 00:00:19,030 --> 00:00:24,730 So I'm going to go ahead and disable the enable property for all of those UI so we don't see them anymore. 7 00:00:24,730 --> 00:00:28,690 And then I'm going to create a new screen GUI in our starter GUI. 8 00:00:28,690 --> 00:00:34,750 And this can be one of my example starting menus, but I'm not going to name it anything, because this 9 00:00:34,750 --> 00:00:37,780 is just me showing you how you can make UI like this. 10 00:00:38,400 --> 00:00:44,880 So for the background, I would like to set it as an image label, which stores kind of like a blur, 11 00:00:44,910 --> 00:00:49,980 because if you saw with our starting menu, if I re-enable it, you can see that there's this kind of 12 00:00:49,980 --> 00:00:55,470 blur to the background that's in our UI, and I use that with an image label. 13 00:00:55,470 --> 00:01:00,660 So with this image label that's going to act as our background, first I'm going to convert the size 14 00:01:00,660 --> 00:01:07,260 and position to scale, and this plugin to convert the size and position from either scale to offset 15 00:01:07,260 --> 00:01:08,820 will be attached to the lecture. 16 00:01:08,820 --> 00:01:13,950 So you can go ahead and install this into studio, and you'll find it underneath your plugins tab. 17 00:01:13,950 --> 00:01:15,120 And you can open it up. 18 00:01:15,120 --> 00:01:16,950 It'll be auto scale light. 19 00:01:16,950 --> 00:01:21,180 And you can open up unit conversion to be able to convert between scale and offset. 20 00:01:21,180 --> 00:01:23,940 But I'm going to convert this image label to scale. 21 00:01:23,940 --> 00:01:27,690 And then we can go ahead and change the size to be the entire size of our screen. 22 00:01:27,690 --> 00:01:32,340 So we can set one for the x axis and then one for the y axis. 23 00:01:32,670 --> 00:01:38,280 Another important property we're going to have to change is this property of ignore guy inset. 24 00:01:38,280 --> 00:01:40,290 And we're going to set that as true. 25 00:01:40,290 --> 00:01:45,930 And the guy inset is that little bar that appears at the top of your screen that contains the Roblox 26 00:01:45,930 --> 00:01:47,880 icon as well as the chat icon. 27 00:01:47,880 --> 00:01:53,280 So if we ignore it, that means this guy is going to cover our entire screen, which is what we want. 28 00:01:54,110 --> 00:01:59,000 Now that we have this UI covering our entire screen, the next thing we can go ahead and do is open 29 00:01:59,000 --> 00:02:05,540 up the toolbox, and we can go over to the image section to find a boar image to apply to the background. 30 00:02:05,540 --> 00:02:08,630 So I'm just going to go ahead and search for boar. 31 00:02:09,550 --> 00:02:13,060 And I'll get back with you when I find something interesting. 32 00:02:13,520 --> 00:02:17,960 So actually right here, I found the original image that I used for the background of my UI. 33 00:02:17,960 --> 00:02:18,770 It's called border. 34 00:02:18,770 --> 00:02:20,780 So I'm going to right click this. 35 00:02:20,780 --> 00:02:26,330 I'm going to copy the asset ID and then I'm going to update the image property inside of my image label. 36 00:02:26,330 --> 00:02:28,880 To be equal to that new ID I'll hit enter. 37 00:02:29,030 --> 00:02:32,060 Now, as you can see, I have this border applied to my screen. 38 00:02:32,060 --> 00:02:34,970 And then I'm going to set the background transparency of one. 39 00:02:34,970 --> 00:02:36,320 So we get rid of that whiteness. 40 00:02:36,320 --> 00:02:40,340 And now as you can see we have this border effect kind of applied to our screen. 41 00:02:40,340 --> 00:02:43,430 And of course we can also change the color of this border a little bit too. 42 00:02:43,460 --> 00:02:48,710 So if we want it to be a little bit darker, I can set the color to be closer to black. 43 00:02:48,830 --> 00:02:53,810 And now what we could go ahead and do is we can go ahead and insert inside of this image, label other 44 00:02:53,810 --> 00:02:58,250 stuff that we want to be on our screen, for example, the title of our game, as well as those three 45 00:02:58,250 --> 00:03:01,610 buttons for playing spectating as well as a store button. 46 00:03:01,910 --> 00:03:04,400 So I'll create a new text label in here. 47 00:03:04,400 --> 00:03:07,670 And this text label is going to be for the title of my game. 48 00:03:07,670 --> 00:03:12,050 Again, I'm going to convert this, uh, size and position to scale. 49 00:03:12,870 --> 00:03:18,840 And this time I'm going to update the anchor point of this text label to be in the middle of my object. 50 00:03:18,840 --> 00:03:24,780 So I'm going to set the anchor point to be 0.5 and 0.5 on the x and y axes. 51 00:03:24,960 --> 00:03:27,570 And as you can see my image label shifted. 52 00:03:27,570 --> 00:03:31,710 But then I'm going to update the position to be in the middle of my screen. 53 00:03:31,710 --> 00:03:37,230 So for scale that's going to be 0.5 on the x axis and then 0.5 on the y axis. 54 00:03:38,000 --> 00:03:41,750 And as you can see, my anchor point is in the center of my text label. 55 00:03:41,750 --> 00:03:44,930 So now this text label is perfectly centered in my screen. 56 00:03:45,560 --> 00:03:52,550 If I want to move it up more, then I can go ahead and change the position to maybe be like 0.25. 57 00:03:52,550 --> 00:03:58,190 And now what I can go ahead and do is I can change the background transparency to be fully transparent. 58 00:03:58,830 --> 00:04:04,890 And then I can enable the text scale property to allow the text to scale with my screen. 59 00:04:04,890 --> 00:04:11,970 So for example, if my screen were to shrink down, as you can see, the text shrinks down with it. 60 00:04:12,390 --> 00:04:18,120 But now that we have this text scale, we can go ahead and pick whatever kind of font we want for our 61 00:04:18,120 --> 00:04:19,170 text label. 62 00:04:19,650 --> 00:04:24,180 For example, maybe you want to set it to the font of, I don't know, luckiest guy. 63 00:04:24,210 --> 00:04:29,190 There's our font and we can go ahead and type out the name of our game, which is I'm just going to 64 00:04:29,190 --> 00:04:30,240 call it waves. 65 00:04:30,240 --> 00:04:32,070 So our game is called waves. 66 00:04:32,070 --> 00:04:33,000 Very cool. 67 00:04:33,420 --> 00:04:37,950 And of course if we want to make this text bigger, we can also resize our text label using these bars 68 00:04:37,950 --> 00:04:38,310 up here. 69 00:04:38,310 --> 00:04:42,390 So I can just move these a bit and resize my text label. 70 00:04:42,840 --> 00:04:46,470 And of course doing this is shifting the position of my text label. 71 00:04:46,470 --> 00:04:50,970 So I'll make sure to recenter it back into the middle of my screen. 72 00:04:52,970 --> 00:04:54,170 Do something like that. 73 00:04:54,730 --> 00:04:56,800 And now you might be wondering, okay, cool. 74 00:04:56,800 --> 00:04:58,630 We have this text on our screen. 75 00:04:58,630 --> 00:05:03,130 How can I add that cool color gradient that we had in our original UI? 76 00:05:03,130 --> 00:05:08,680 Because if we go and look back at our original starting menu, if I enable it, we have this cool red 77 00:05:08,680 --> 00:05:10,270 to green color gradient. 78 00:05:10,270 --> 00:05:11,290 How do I add that? 79 00:05:11,380 --> 00:05:13,150 Well, I'm glad you asked. 80 00:05:13,150 --> 00:05:20,020 We can add a new child of our text label, and this child is called a UI gradient right here. 81 00:05:20,020 --> 00:05:28,300 And this allows us to create gradient colors for our text or even for other things in your UIs like 82 00:05:28,300 --> 00:05:29,170 frames and such. 83 00:05:29,170 --> 00:05:30,850 You can create a color gradient. 84 00:05:31,330 --> 00:05:35,800 Now in order for this color gradient to be visible, I'm going to have to update the color of my text 85 00:05:35,830 --> 00:05:37,300 to be completely white. 86 00:05:39,300 --> 00:05:43,170 And now with my UI gradient, I can go ahead and pick some kind of color scheme. 87 00:05:43,710 --> 00:05:48,690 So what you actually want to do is you want to open these three dots here, and it's going to give you 88 00:05:48,690 --> 00:05:51,240 this gradient right here that you can go ahead and update the color for. 89 00:05:51,240 --> 00:05:55,410 So on this left side here I can pick a new color for example. 90 00:05:55,410 --> 00:05:58,890 Maybe I want it to be like we had red in the original one. 91 00:05:58,890 --> 00:06:02,370 So I'll do a nice dark red close out of there. 92 00:06:02,640 --> 00:06:06,330 And then for this other end of the color gradient, maybe I want it to be green. 93 00:06:06,330 --> 00:06:10,590 So I'll do like a nice bright green and then we can close out of that. 94 00:06:11,160 --> 00:06:15,660 You can add more colors by clicking and creating a new icon in between. 95 00:06:15,660 --> 00:06:19,620 You can add different colors to create whatever kind of color gradient you want. 96 00:06:20,280 --> 00:06:24,420 But if you accidentally added one of these, you can just go ahead and click delete. 97 00:06:24,420 --> 00:06:25,620 And now it's gone. 98 00:06:25,770 --> 00:06:30,510 But here we have our cool little neat color gradient going across our text. 99 00:06:30,540 --> 00:06:36,270 We can also manipulate this color gradient in many ways, such as offsetting it or rotating it. 100 00:06:36,270 --> 00:06:43,230 So if I rotated this color gradient by 90 degrees, as you can see now it's going up and down rather 101 00:06:43,230 --> 00:06:45,180 than from left to right. 102 00:06:45,180 --> 00:06:48,420 But I'll set it back to the left to right because I like that one more. 103 00:06:48,840 --> 00:06:51,360 And now we have the title for our game. 104 00:06:51,360 --> 00:06:54,300 Let's go ahead and create some buttons. 105 00:06:54,330 --> 00:06:58,530 So to create a button we can create a new text button. 106 00:06:58,950 --> 00:07:00,060 And here's our text button. 107 00:07:00,060 --> 00:07:01,770 We're going to do the exact same thing. 108 00:07:01,770 --> 00:07:05,790 We'll set the anchor point to be in the middle of the object. 109 00:07:05,790 --> 00:07:10,710 We'll convert size and position to scale, and we're going to go ahead and place it in the center of 110 00:07:10,710 --> 00:07:11,160 the screen. 111 00:07:11,160 --> 00:07:12,780 So we'll do 0.5. 112 00:07:14,540 --> 00:07:24,230 And then we can perhaps set it to be at maybe point four, something like that. 113 00:07:24,500 --> 00:07:29,600 And then for these text buttons, I would actually like to keep the background for the button. 114 00:07:29,600 --> 00:07:36,230 But I would like to also color the background with a gradient so we can add another UI gradient and 115 00:07:36,230 --> 00:07:41,000 go ahead and manipulate the background color for this text button. 116 00:07:41,000 --> 00:07:42,110 So. 117 00:07:42,990 --> 00:07:47,010 What we can do is we can actually just copy the gradient that we've already made and then just paste 118 00:07:47,010 --> 00:07:49,380 that in there and delete the previous. 119 00:07:49,380 --> 00:07:52,710 And as you can see now we have our cool little gradient on our text button. 120 00:07:53,930 --> 00:07:57,140 For this text button can go ahead and be like my play button. 121 00:07:58,130 --> 00:08:02,750 Again, we already have the UI for our game, but I'm just showing you how you can create your own UI 122 00:08:02,750 --> 00:08:04,040 and rename everything, right? 123 00:08:04,040 --> 00:08:06,470 So we have our play button with our UI gradient. 124 00:08:06,470 --> 00:08:08,480 We have our title with our UI gradient. 125 00:08:08,480 --> 00:08:14,240 If we want to go ahead and round off the corners of this UI button, then we can go ahead and apply 126 00:08:14,240 --> 00:08:16,460 a UI corner right here. 127 00:08:17,410 --> 00:08:20,080 And this UI corner has two different properties. 128 00:08:20,080 --> 00:08:21,910 One is scale or one is offset. 129 00:08:22,570 --> 00:08:29,350 So if you remember in the previous lecture where I talked about UI elements, is that scale is going 130 00:08:29,350 --> 00:08:34,600 to represent basically the percentage along your screen regardless of resolution. 131 00:08:34,600 --> 00:08:39,100 And the offset is going to represent actually the amount in pixels most of the time. 132 00:08:39,100 --> 00:08:45,340 For UI corner, you're probably going to want to do an offset just so you keep like a standard or consistent 133 00:08:45,340 --> 00:08:48,100 cornering of your UI objects. 134 00:08:48,100 --> 00:08:52,810 So for example, if I set it to be 15, then I have a UI cornering. 135 00:08:53,080 --> 00:08:56,110 Then I have a UI corner of 15 studs. 136 00:08:56,110 --> 00:08:58,090 So there's my corner button. 137 00:08:58,360 --> 00:09:06,460 But if you decide to do scale instead, like you did 0.25, if you were to resize your screen, then 138 00:09:06,460 --> 00:09:10,930 that scaling would um, of course be different. 139 00:09:10,930 --> 00:09:12,970 So as you can see, you can barely. 140 00:09:13,610 --> 00:09:15,410 See that UI cornering. 141 00:09:15,960 --> 00:09:20,550 Because the scaling is being weird when we're resizing the screen like this. 142 00:09:20,550 --> 00:09:28,260 But if I decided to keep my UI corner at a constant offset of like maybe 30 pixels, and then if I go 143 00:09:28,260 --> 00:09:36,180 and resize my screen, as you can see, it will constantly keep that cornering of 30 pixels no matter 144 00:09:36,180 --> 00:09:39,540 what the size is of my screen. 145 00:09:41,010 --> 00:09:43,620 But I'm just going to set it to like ten. 146 00:09:43,620 --> 00:09:45,510 That'll probably be good. 147 00:09:45,900 --> 00:09:52,110 And then from this point we can go ahead and manipulate stuff like the text inside of it, so we can 148 00:09:52,110 --> 00:09:59,160 go ahead and change the font to like maybe bangers, make sure the text is scaled and we can say something 149 00:09:59,160 --> 00:10:01,380 like play, this is our play button. 150 00:10:02,310 --> 00:10:05,100 And of course we can also manipulate like the text transparency. 151 00:10:05,100 --> 00:10:10,260 So if we want it to be more transparent to kind of like have that gradient pass through it, or if we 152 00:10:10,260 --> 00:10:15,030 would like the gradient to affect the text itself, we can set its color to white. 153 00:10:15,030 --> 00:10:18,210 As you can see now, the gradient is also affecting the text. 154 00:10:18,210 --> 00:10:21,090 And the text is basically blending in with the button. 155 00:10:21,090 --> 00:10:26,400 But if I make it a little bit darker, as you can see now, you can see the text, but still it has 156 00:10:26,400 --> 00:10:28,140 that gradient being applied to it. 157 00:10:28,530 --> 00:10:34,380 But I'll just keep it at black just so there's like a contrast between the text and the background. 158 00:10:34,650 --> 00:10:40,320 And then another thing we can do with this play button is we can keep it at a specific aspect ratio. 159 00:10:40,320 --> 00:10:43,350 Because if you saw earlier when we were resizing our screen. 160 00:10:44,120 --> 00:10:48,350 You can see our button is reshaping itself very strangely. 161 00:10:48,350 --> 00:10:53,000 And that's because since we're using scale for the size of this UI button. 162 00:10:53,740 --> 00:10:56,530 If we go ahead and look at the button. 163 00:10:57,460 --> 00:11:01,000 On the x axis. 164 00:11:01,000 --> 00:11:07,570 When we look at the size, we want it to be 12% across the x axis on our screen. 165 00:11:07,630 --> 00:11:15,070 Well, when we start resizing our screen like this, as you can see, it's still maintaining that 12% 166 00:11:15,070 --> 00:11:16,690 across the screen, right? 167 00:11:16,690 --> 00:11:18,700 As you can see, it's still remaining the same. 168 00:11:18,700 --> 00:11:25,030 But because the aspect ratio of our screen is changing, or the dimension on the y axis is changing, 169 00:11:25,030 --> 00:11:29,530 it's causing our UI button to start looking a little bit weird, right? 170 00:11:30,630 --> 00:11:35,790 So if we want to prevent those issues, what we can do is we can add something called a UI aspect ratio 171 00:11:35,790 --> 00:11:36,690 constraint. 172 00:11:36,990 --> 00:11:41,880 And that's going to constrain the size of our button to a specific aspect ratio. 173 00:11:41,880 --> 00:11:44,160 So as you can see the aspect ratio is one. 174 00:11:44,160 --> 00:11:46,230 So this is 1 to 1. 175 00:11:46,680 --> 00:11:55,740 If I set it to two then the aspect ratio is two to 1 or 5 is five to 1 or 4 4 to 1. 176 00:11:55,740 --> 00:12:01,680 And now if I resize my screen my button is always going to keep that consistent aspect ratio. 177 00:12:02,820 --> 00:12:07,320 So now what we can do is we can just basically duplicate this button multiple times to create our other 178 00:12:07,320 --> 00:12:08,190 buttons. 179 00:12:08,220 --> 00:12:11,850 This one could be our like spectate button. 180 00:12:11,850 --> 00:12:16,170 So spectate button and then we'll have a store button. 181 00:12:16,780 --> 00:12:18,280 And then we can just move these around. 182 00:12:18,280 --> 00:12:19,870 So I'll shift this one down. 183 00:12:19,870 --> 00:12:20,800 Words. 184 00:12:20,800 --> 00:12:23,470 We'll set it to like 0.6. 185 00:12:23,560 --> 00:12:24,460 That's too far. 186 00:12:29,030 --> 00:12:31,160 Maybe something like 0.5. 187 00:12:31,160 --> 00:12:32,330 We could do something like that. 188 00:12:32,330 --> 00:12:36,440 And then for the other one we could do like 0.6 or whatever however you want to set it up. 189 00:12:37,240 --> 00:12:39,070 Now you have each of your different buttons. 190 00:12:39,070 --> 00:12:41,020 We can change the text in each one of these. 191 00:12:41,020 --> 00:12:43,990 So this is our spectate button. 192 00:12:43,990 --> 00:12:46,570 And then this one is our store button. 193 00:12:46,570 --> 00:12:51,340 And then if you want to make the play button a little bit larger we can go ahead and resize it. 194 00:12:51,670 --> 00:12:53,170 Make it a bit bigger. 195 00:12:58,150 --> 00:12:59,200 So there you go. 196 00:12:59,200 --> 00:13:01,510 You have your play button, your spectate button. 197 00:13:01,510 --> 00:13:02,860 You got your store button. 198 00:13:02,860 --> 00:13:04,510 They each have their own color gradients to it. 199 00:13:04,510 --> 00:13:06,940 And we got that nice blur in the background. 200 00:13:07,510 --> 00:13:13,480 So yeah, that's kind of the basic process for how we create UI in our games. 201 00:13:13,480 --> 00:13:15,760 Let me go ahead and disable the visibility. 202 00:13:15,760 --> 00:13:19,450 And then we can go back to our original UI for our game. 203 00:13:19,450 --> 00:13:22,210 As you can see, it's basically almost the exact same thing we did. 204 00:13:22,210 --> 00:13:24,040 We have cornering on our buttons. 205 00:13:24,040 --> 00:13:26,380 We have text, the title of our game. 206 00:13:26,380 --> 00:13:32,050 And then of course, there's some other things in our UI such as the actual frame for spectating. 207 00:13:32,050 --> 00:13:33,070 So this one is very simple. 208 00:13:33,070 --> 00:13:34,480 We just have some text here. 209 00:13:34,480 --> 00:13:39,370 We have a text button down here, and then we have some image buttons that players can click when they 210 00:13:39,370 --> 00:13:41,170 go and they start spectating. 211 00:13:41,560 --> 00:13:42,880 That's for the spectating frame. 212 00:13:42,880 --> 00:13:44,260 We also have a store frame. 213 00:13:44,260 --> 00:13:50,410 This one's a little bit more interesting, because what we have in here is a scrolling frame. 214 00:13:50,560 --> 00:13:53,800 And a scrolling frame basically allows us to put stuff inside of it. 215 00:13:53,800 --> 00:13:59,950 And then if the amount of stuff that we put inside of it exceeds the size of the scrolling frame, well, 216 00:13:59,950 --> 00:14:03,970 then it'll add a scroll wheel that we can actually go and scroll through the different items. 217 00:14:03,970 --> 00:14:09,100 So for example, here, if I duplicate and put a bunch of stuff inside of this frame, as you can see, 218 00:14:09,100 --> 00:14:14,860 the scrolling bar appears, and now I can go ahead and scroll through those different items inside of 219 00:14:14,860 --> 00:14:15,790 my frame. 220 00:14:17,560 --> 00:14:23,140 And to set up our scrolling frames in that way is that we add these constraints. 221 00:14:23,140 --> 00:14:28,720 For example, this one's called a UI grid layout, and it tells us, okay with the elements that we're 222 00:14:28,720 --> 00:14:34,360 putting inside of our scrolling frame, what we would like the size of each of those cells to be. 223 00:14:34,660 --> 00:14:40,180 So as you can see here, I've set it to be equal to 0.5 on the x and then one on the y axis. 224 00:14:40,180 --> 00:14:41,830 And then I'm subtracting it. 225 00:14:42,330 --> 00:14:48,570 By these offset amounts or a defined amount in pixels. 226 00:14:48,570 --> 00:14:55,950 And the reason I do that is that way I keep a consistent gap between the elements inside of my UI, 227 00:14:55,950 --> 00:14:58,290 and that's because I'm adding this padding here. 228 00:14:58,290 --> 00:15:04,560 I want to keep a gap of exactly six pixels between my different elements on the x and y axis. 229 00:15:04,560 --> 00:15:10,140 So as you can see, there's always a gap of six pixels between my different elements. 230 00:15:10,140 --> 00:15:13,350 If I didn't, uh, change the size. 231 00:15:14,820 --> 00:15:17,040 On either the x or the y axis. 232 00:15:17,040 --> 00:15:22,890 As you can see, my UI grid layout is acting funky because I'm not accounting for the padding that I'm 233 00:15:22,890 --> 00:15:24,990 adding between my different pieces of UI. 234 00:15:25,020 --> 00:15:32,100 So I want to make sure that I subtract the value on both the x and the y axis, so I keep that consistent 235 00:15:32,100 --> 00:15:38,520 six pixel gap between each element inside of my scrolling frame, and the scrolling frame updates its 236 00:15:38,520 --> 00:15:38,970 size. 237 00:15:38,970 --> 00:15:45,090 Because there is a property in here called Automatic canvas size, where we have told it to automatically 238 00:15:45,090 --> 00:15:53,550 update its size on the y axis when there are enough descendants or UI elements to warrant it to resize 239 00:15:53,550 --> 00:15:54,390 itself. 240 00:15:54,390 --> 00:15:56,700 So as you can see, it's just resized itself. 241 00:15:56,700 --> 00:16:03,960 And if I keep adding more, it's continuing to resize itself to accommodate these other, uh, UI elements 242 00:16:03,960 --> 00:16:06,660 that are filling up inside of our scrolling frame. 243 00:16:07,230 --> 00:16:13,200 So there's a lot of neat things that you can do with UI, and it's basically just up to your creative 244 00:16:13,200 --> 00:16:17,730 preference on how you want your UI to look and what you want your UI to do. 245 00:16:18,250 --> 00:16:24,700 So feel free to go and manipulate this guy that I have attached to the game assets. 246 00:16:24,700 --> 00:16:30,190 You can go ahead and change the color or change the fonts, uh, and whatever other properties you want 247 00:16:30,190 --> 00:16:34,330 to change, and see what kind of UI you can come up with for this project. 248 00:16:34,330 --> 00:16:38,920 Other than that, that's kind of my process for creating UI elements on the screen. 249 00:16:38,920 --> 00:16:41,440 And I'll see you in the next lecture.